<!-- 方案一：直接使用装饰后的 Map 类型数据渲染节点
<ng-container *ngFor="let nodeMap of nodes | keyvalue">
    <ng-container
        *ngFor="let node of nodeMap.value | keyvalue"
        [ngSwitch]="node.value['type']"
    >
        流程节点
        <action-pnode
            *ngSwitchCase="nodeType.ACTION"
            [ngStyle]="{
                position: 'absolute',
                zIndex: '11',
                left: node.value['x'] * xWidth + 'px',
                top: node.value['y'] * yWidth + 'px'
            }"
            [data]="node.value"
        ></action-pnode>

        动作节点
        <process-pnode
            *ngSwitchCase="nodeType.PROCESS"
            [ngStyle]="{
                position: 'absolute',
                zIndex: '11',
                left: node.value['x'] * xWidth + 'px',
                top: node.value['y'] * yWidth + 'px'
            }"
            [data]="node.value"
        ></process-pnode>

        条件节点
        <condition-pnode
            *ngSwitchCase="nodeType.CONDITION"
            [ngStyle]="{
                position: 'absolute',
                zIndex: '11',
                left: node.value['x'] * xWidth + 'px',
                top: node.value['y'] * yWidth + 'px'
            }"
            [data]="node.value"
        ></condition-pnode>

        辅助节点
        <helper-pnode
            *ngSwitchCase="nodeType.HELPER"
            [ngStyle]="{
                position: 'absolute',
                zIndex: '11',
                left: node.value['x'] * xWidth + 'px',
                top: node.value['y'] * yWidth + 'px'
            }"
            [data]="node.value"
        ></helper-pnode>
    </ng-container>
</ng-container>

<ng-container *ngFor="let edge of edges">
    <pedge-pnode
        [ngStyle]="{
            position: 'absolute',
            transformOrigin: 'left top',
            left: edge['_x'] + 'px',
            top: edge['_y'] + 'px',
            width: edge.width + 'px',
            transform: 'rotate(' + edge.rotate + 'deg)'
        }"
        [data]="edge"
    ></pedge-pnode>
</ng-container> -->

<!-- 方案二：使用简单的数组渲染 -->
<ng-container *ngFor="let node of renderPnodes" [ngSwitch]="node['type']">
    <!-- 流程节点 -->
    <action-pnode
        *ngSwitchCase="nodeType.ACTION"
        [ngStyle]="{
            position: 'absolute',
            zIndex: '11',
            left: node['x'] * xWidth + 'px',
            top: node['y'] * yWidth + 'px',
            transition: 'all 0.2s ease'
        }"
        [data]="node"
    ></action-pnode>

    <!-- 动作节点 -->
    <process-pnode
        *ngSwitchCase="nodeType.PROCESS"
        [ngStyle]="{
            position: 'absolute',
            zIndex: '11',
            left: node['x'] * xWidth + 'px',
            top: node['y'] * yWidth + 'px',
            transition: 'all 0.2s ease'
        }"
        [data]="node"
    ></process-pnode>

    <!-- 条件节点 -->
    <condition-pnode
        *ngSwitchCase="nodeType.CONDITION"
        [ngStyle]="{
            position: 'absolute',
            zIndex: '11',
            left: node['x'] * xWidth + 'px',
            top: node['y'] * yWidth + 'px',
            transition: 'all 0.2s ease'
        }"
        [data]="node"
    ></condition-pnode>

    <!-- 辅助节点 -->
    <helper-pnode
        *ngSwitchCase="nodeType.HELPER"
        [ngStyle]="{
            position: 'absolute',
            zIndex: '11',
            left: node['x'] * xWidth + 'px',
            top: node['y'] * yWidth + 'px',
            transition: 'all 0.2s ease'
        }"
        [data]="node"
    ></helper-pnode>
</ng-container>

<ng-container *ngFor="let edge of edges">
    <pedge-pnode
        [ngStyle]="{
            position: 'absolute',
            transformOrigin: 'left top',
            left: edge['x'] + 'px',
            top: edge['y'] + 'px',
            width: edge.width + 'px',
            transform: 'rotate(' + edge.rotate + 'deg)'
        }"
        [data]="edge"
    ></pedge-pnode>
</ng-container>
